<template>
    <!-- 生命周期统计 -->
    <div class="main-container" id="main-container">
        <div style="background: #fff; height: 100%" id="lifeCycleStatistics">
            <PageTabelLayout>
                <template #pageHeader>
                    <div class="my-header" style="padding: 10px;box-sizing: border-box;" v-if="headerShow">
                        <a-form size="small" :model="searchData" auto-label-width layout="inline">
                            <a-form-item label="客户名称">
                                <a-input class="bacClass" style="width:200px" v-model="searchData.customName" />
                            </a-form-item>
                            <a-form-item label="付运日期">
                                <a-range-picker  popup-container="html"  class="bacClass" style="width:400px" show-time @change="changeRngeDate" clear />
                            </a-form-item>
                        </a-form>
                    </div>
                    <div class="my-divisders">
                        <a-divider orientation="center">
                            <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                            <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                        </a-divider>
                    </div>
                    <div class="my-tool-bar" style="padding: 10px;">
                        <Toolbar :items="['查询', '导出']" @select="selectHandler" @export="exportHandler" />
                    </div>
                </template>
                <template #pageTabel>
                    <div style="overflow-y: scroll;height: 100%;">
                        <a-tabs   :lazy-load="true" :default-active-key="1" trigger="click" @change="changHandler" justify>
                            <a-tab-pane :key="1" title="生产周期汇总">
                                    <gather :searchData="searchData" />
                            </a-tab-pane>
                            <a-tab-pane :key="2" title="超期情况">
                                    <overdueSituation :searchData="searchData" />
                            </a-tab-pane>
                        </a-tabs>
                    </div>
                </template>
            </PageTabelLayout>
        </div>
    </div>
</template> 

<script  lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { reactive, ref, onMounted } from 'vue'
import emitter from "@/hooks/useEventBus";
export default {
    name: "lifeCycleStatistics",
    components: { PageTabelLayout },
    setup() {
        onMounted(() => {
            // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
            selectHandler();
            emitter.emit('window-change');
        });
        const searchData = reactive<{
            customName: string,
        }>({
            customName: ''
        });
        let handlerState = ref<number>(1);
        const headerShow = ref<boolean>(true);
        let changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit('window-change');
        };
        const selectHandler = () => {
            if (handlerState.value === 1) {
                emitter.emit('refresh-gather');
            } else {
                emitter.emit('refresh-overdueSituation');
            }
        };
        const exportHandler = () => {
            if (handlerState.value === 1) {
                emitter.emit('export-gather');
            } else {
                emitter.emit('export-overdueSituation');
            }
        };
        const changHandler = (e: number | string) => {
            handlerState.value = +e;
            selectHandler();
        };
        const changeRngeDate = (date: any) => {
            console.log(date)
        }
        return {
            searchData,
            headerShow,
            selectHandler,
            exportHandler,
            changHeadShow,
            changHandler,
            changeRngeDate,
        }
    },
}
</script>

<style scoped>
.main-container {
    height: 100%;
}

.arco-drawer-header .arco-drawer-title {
    width: 100%;
}


.aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.aInputLine {
    border: 1px solid #c9cdd3;
    background: #fff;
}
		
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}

</style>